<template>
  <uv-tabbar
    :value="currentTab"
    @change="onTabChange"
    :fixed="true"
    :placeholder="true"
    :safeAreaInsetBottom="true"
    activeColor="#ffde58"
    inactiveColor="#909399"
  >
    <uv-tabbar-item
      v-for="(item, index) in tabList"
      :key="index"
      :text="item.text"
      :name="item.name"
      :icon="item.icon"
    />
  </uv-tabbar>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

const tabList = ref([
  {
    name: "index",
    pagePath: "/pages/index/index",
    text: "首页",
    icon: "home",
  },
  {
    name: "entertainment",
    pagePath: "/pages/entertainment/index",
    text: "娱乐",
    icon: "play-right",
  },
  {
    name: "trends",
    pagePath: "/pages/trends/index",
    text: "动态",
    icon: "moments",
  },
  {
    name: "profile",
    pagePath: "/pages/profile/index",
    text: "我的",
    icon: "account",
  },
]);

const currentTab = ref('index');

onShow(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const matchedTab = tabList.value.find(
    (tab) => tab.pagePath === `/${currentPage.route}`
  );
  if (matchedTab) {
    currentTab.value = matchedTab.name;
  }
});

const onTabChange = (name: string) => {
  const targetTab = tabList.value.find((tab) => tab.name === name);
  if (targetTab) {
    uni.switchTab({ url: targetTab.pagePath });
  }
};
</script>

<style lang="scss" scoped></style>
